<template>
	<div class="center-view">
		<gr-button color="primary" @click="click1">中间</gr-button>
		<gr-button color="primary" @click="click2">上方</gr-button>
		<gr-button color="primary" @click="click3">下方</gr-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			click1(e) {
				this.$toast.show('这是一个吐司提示', 1000)
			},
			click2(e) {
				this.$toast.show('这是一个吐司提示', 1000, 'top')
			},
			click3(e) {
				this.$toast.show({
					message: '这是一个吐司提示',
					duration: 1000,
					position: 'bottom'
				})
			}
		}
	}
</script>

<style lang="scss">
	.center-view {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 20px);
	}
</style>
